<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form label-width="80px">
          <el-row type="flex" justify="space-between">
            <el-col :span="5">
              <el-form-item label="关键字">
                <el-input
                  placeholder="根据文章标题搜索"
                  size="small"
                  style="width: 190px"
                  v-model="pageParams.keyword"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="状态">
                <el-select
                  size="small"
                  style="width: 190px"
                  v-model="pageParams.state"
                >
                  <el-option label="启用" :value="1" />
                  <el-option label="禁用" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item>
                <el-button
                  size="small"
                  @click="pageParams.keyword = pageParams.state = null"
                  >清除</el-button
                >
                <el-button size="small" type="primary" @click="getlist"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <el-button size="small" type="success" @click="addSkill(null)"
                  ><i class="el-icon-edit"></i>新增技巧</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-tag type="info" class="tag">
          <i class="el-icon-info"> </i>数据一共{{ this.total }}条
        </el-tag>
        <el-table
          :data="articleList"
          :header-cell-style="
            () => {
              return 'background-color:#fafafa'
            }
          "
        >
          <el-table-column
            label="序号"
            width="80"
            type="index"
            :index="indexMethod"
          />
          <el-table-column label="文章标题" width="400" prop="title">
            <template #default="{ row }">
              <span>
                {{ row.title }}
                <i
                  class="el-icon-film"
                  v-if="row.videoURL"
                  @click="video(row.videoURL)"
                ></i>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="阅读数" prop="visits" />
          <el-table-column label="录入人" prop="username" />
          <el-table-column label="录入时间" prop="createTime" />
          <el-table-column label="状态" width="100" prop="state">
            <template #default="{ row }">
              <span v-if="row.state === 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <el-button type="text" @click="getArticleDetail(row.id)"
                >预览</el-button
              >
              <el-button
                v-if="row.state === 0"
                type="text"
                @click="changeStateClick(row.id, row.state)"
                >启用</el-button
              >
              <el-button
                v-else
                type="text"
                @click="changeStateClick(row.id, row.state)"
                >禁用</el-button
              >
              <el-button
                type="text"
                @click="addSkill(row.id)"
                :disabled="row.state === 1"
                >修改</el-button
              >
              <el-button
                type="text"
                @click="open(row.id)"
                :disabled="row.state === 1"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-row
          type="flex"
          justify="end"
          align="middle"
          style="margin-top: 20px"
        >
          <el-pagination
            :page-sizes="[5, 10, 20, 50]"
            :current-page="pageParams.page"
            :page-size="pageParams.pagesize"
            layout="prev, pager, next,sizes,jumper"
            @current-change="handlecurrentChange"
            @size-change="handlesizeChange"
            :total="this.total"
            background
          >
          </el-pagination>
        </el-row>
      </el-card>
    </div>

    <el-dialog
      title="预览文章"
      :visible="showDialog"
      @close="showDialog = false"
    >
      <h2>{{ this.previewList.title }}</h2>
      <span style="margin-right: 10px">{{ this.previewList.createTime }}</span>
      <span style="margin-right: 10px">{{creatorName}}</span>
      <i class="el-icon-view" style="margin-right: 10px"></i>
      <span>{{ this.previewList.visits }}</span>
      <div v-html="this.previewList.articleBody" class="look-main"></div>
    </el-dialog>
    <article-add
      ref="articleAdd"
      :opoclDialog.sync="opoclDialog"
      :change-id="changeId"
      @afterAddChangeData="getlist"
      @pageToOne="pageParams.page = 1"
    ></article-add>
    <div class="popContainer" v-if="videoDialog">
      <span @click="videoDialog = false" class="videoClose"
        ><i class="el-icon-close"></i
      ></span>
      <div class="video-player">
        <video
          autoplay
          controls
          style="width: 100%; margin-top: 25%"
          :src="videoPlayer"
        ></video>
      </div>
    </div>
  </div>
</template>

<script>
import { list, changeState, detail, remove } from '../../api/hmmm/articles'
import { simple } from '../../api/base/users'
import articleAdd from '../components/articles-add.vue'
export default {
  components: {
    articleAdd
  },
  data () {
    return {
      pageParams: {
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null
      },
      creator: [],
      creatorName: null,
      total: 0,
      // 文章列表
      articleList: [],
      // 预览弹框显示
      showDialog: false,
      // 文章详情
      previewList: {},
      // 添加编辑弹框显示
      opoclDialog: false,
      // 修改按钮id
      changeId: null,
      videoDialog: false,
      videoPlayer: ''
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    video (data) {
      this.videoPlayer = data
      this.videoDialog = true
    },
    // 新增
    addSkill (id) {
      // 打开弹窗
      this.opoclDialog = true
      this.changeId = id
      // 获取文章详情
      this.$nextTick(() => {
        this.$refs.articleAdd.getDetail()
      })
    },
    // 表格序号
    indexMethod (index) {
      return index + 1
    },
    // 获取文章列表
    async getlist () {
      const { data } = await list(this.pageParams)
      const { data: num } = await simple()
      this.creator = num
      this.articleList = data.items
      const dayjs = require('dayjs')
      this.articleList.map((item) => {
        // 转换时间格式
        item.createTime = dayjs(new Date(item.createTime)).format(
          'YYYY-MM-DD HH:mm:ss'
        )
      })
      this.total = data.counts
    },
    // 点页码换页
    handlecurrentChange (currentPage) {
      this.pageParams.page = currentPage
      this.getlist()
    },
    // 换一页展示多少
    handlesizeChange (currentPageSize) {
      this.pageParams.pagesize = currentPageSize
      this.getlist()
    },
    // 修改文章状态
    async changeStateClick (id, state) {
      state = Number(!state)
      await changeState({ state, id })
      this.getlist()
      this.$message.success('操作成功')
    },
    // 获取文章详情
    async getArticleDetail (id) {
      const { data } = await detail({ id })
      this.previewList = data
      this.showDialog = true
      const dayjs = require('dayjs')
      this.previewList.createTime = dayjs(
        new Date(this.previewList.createTime)
      ).format('YYYY-MM-DD HH:mm:ss')
      this.creator.forEach(item => {
        if (item.id === this.previewList.creatorID) {
          this.creatorName = item.username
        }
      })
    },
    open (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.getlist()
        if (this.articleList.length === 1 && this.pageParams.page > 1) {
          this.pageParams.page--
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    }

  }
}
</script>

<style scoped>
/* 灰框数据共多少条 */
.tag {
  width: 100%;
  height: 35px;
  font-size: 13px;
  line-height: 35px;
  margin: 0 0 15px;
}
/* 灰框里i字体图标 */
.el-icon-info {
  margin-right: 10px;
  font-size: 16px;
}
/* 预览弹窗主题内容样式 */
.look-main {
  background-color: rgb(245, 245, 245);
  border-top: dashed 1px rgb(204, 204, 204);
  padding: 10px;
}
/* 表格标题中视频播放按钮 */
.el-icon-film {
  font-size: 20px;
  color: blue;
  cursor: pointer;
}
/* 灰色遮罩 */
.popContainer {
  position: relative;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
/* 视频播放器盒子*/
.video-player {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 25%;

}
/* 视频播放关闭按钮 */
.videoClose {
  position: absolute;
  left: 50%;
  top: 5%;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  border-radius: 50%;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 2;
}
</style>
